<template>
  <div class="mod-config">
    <basic-container>
      <headAssessment
        :sign="{ a: false, b: false, c: true, d: false }"
      ></headAssessment>
      <div class="boxsty zhiBiao">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">考核事件查看</div>
        </div>
        <div class="entry">
          <el-radio-group v-model="dataForm.module" @change="getDataList()">
            <el-radio label="PERSON">个人</el-radio>
            <el-radio label="DEPT">机构</el-radio>
          </el-radio-group>
          <div>
            <el-button
              type="primary"
              style="text-align: right"
              @click="passBatch"
              >批量通过</el-button
            >
            <el-button
              type="primary"
              style="text-align: right"
              @click="rejectBatch"
              >批量退回</el-button
            >
            <el-button
              type="primary"
              style="text-align: right"
              >数据导出</el-button
            >
            <el-button
              type="primary"
              style="text-align: right"
              @click="$router.back()"
              >返回</el-button
            >
          </div>
        </div>
        <el-table
          :data="dataList"
          v-loading="dataListLoading"
          stripe
          class="avue-crud"
          height="450px"
          @selection-change="handleSelectionChange"
          
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            prop=""
            label="序号"
            :formatter="nShowIndex"
          ></el-table-column>
          <el-table-column prop="deptName" label="所属部门"></el-table-column>
          <el-table-column
            v-if="dataForm.module == 'PERSON'"
            prop="identity"
            label="员工编号"
          ></el-table-column>
          <el-table-column
            v-if="dataForm.module == 'PERSON'"
            prop="name"
            label="姓名"
          ></el-table-column>
          <el-table-column prop="score" label="加扣分值"></el-table-column>
          <el-table-column prop="salary" label="加扣金额"></el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            :formatter="statusFormatter"
          ></el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="pass(scope.row.id)"
                >通过</el-button
              >
              <el-button type="primary" plain @click="reject(scope.row.id)"
                >退回</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import {
  getAssessmentEventPage,
  submitAssessmentEventStatus,
} from "@/api/assessment/event";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      dataForm: {
        status:2,
        module: "",
        moduleId: null,
      },
      options: [
        { value: "未发放", label: "未发放" },
        { value: "已发放", label: "已发放" },
      ],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      selectionRows:[]
    };
  },
  created() {
    this.dataForm.module = this.$route.query.module;
    this.dataForm.moduleId = this.$route.query.moduleId;
    this.getDataList();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    handleSelectionChange(vals) {
      this.selectionRows = vals;
    },
    passBatch() {
      if (this.selectionRows) {
        let ids = this.selectionRows.map((v) => v.id);
        this.submitStatus(ids, 3);
      }
    },
    rejectBatch() {
      if (this.selectionRows) {
        let ids = this.selectionRows.map((v) => v.id);
       //console.log(ids)
        this.submitStatus(ids, -1);
      }
    },
    pass(id) {
      this.submitStatus([id], 3);
    },
    reject(id) {
      this.submitStatus([id], -1);
    },
    submitStatus(ids, status) {
      submitAssessmentEventStatus({ ids, status }).then((res) => {
        this.getDataList();
      });
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      getAssessmentEventPage(
        Object.assign(
          {
            current: this.pageIndex,
            size: this.pageSize,
          },
          this.dataForm
        )
      )
        .then((response) => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total;
        })
        .finally(() => (this.dataListLoading = false));
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1;
    },
    statusFormatter(row, column, cellValue, index) {
      if (cellValue == 0) {
        return "未提交";
      } else if (cellValue == -1) {
        return "不通过";
      } else if (cellValue == 1 || cellValue == 2) {
        return "已提交";
      } else if (cellValue == 3) {
        return "通过";
      }
    },
  },
};
</script>
